<template>
	<view class="body">
		<view class="head">
			<view class="mcava" @click="gomct(showObj)">
				<image :src="userInfo.avatarUrl" class="ava"></image>
			</view>
			<view class="mct" @click="gomct(showObj)">
				<view class="name">
					{{userInfo.nickName}}
				</view>
				<view class="message">
					主营卖大西瓜
				</view>
			</view>
		</view>
		<view class="center">
			<view class="commodity">
				<view class="commodityposter">
					<u-swiper :list="list5" @change="e => currentNum = e.current" :autoplay="false"
						indicatorStyle="right: 20px" height="100%">
						<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list5.length }}</text>
						</view>
					</u-swiper>
				</view>
				<view class="commodityintro">
					<view class="title">
						<view class="title_spjs">
							商品介绍
						</view>
						<view class="pricearea">
							价格:
							<view class="price">
								{{showObj.price}}
							</view>
						</view>
					</view>

					<view class="introducearea">
						{{showObj.productionName}}
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="tophalf">
				<view class="leavingmes">留言</view>
				<view class="userava">
					<image :src="userInfo.avatarUrl" class="userava"></image>
				</view>
				<view class="input">
					<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input>
				</view>
				<view class="tj">
					<u-button type="primary" icon="checkbox-mark" text="提交" shape="circle" size="small"></u-button>
				</view>
			</view>
			<!-- <view class="bottomhalf">
				<view class="other">
					
				</view>
			</view> -->
		</view>
		<view class="buyframe">
			<view class="buttonbuy">
				<u-button type="primary" text="购买" @click="toOrder"></u-button>
			</view>
			<view class="buttoncontact">
				<u-button type="primary" text="联系" @click="phone"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list5: [

				],
				showObj: null,
				userInfo: '',
			}
		},
		onLoad(options) {

			this.showObj = JSON.parse(decodeURIComponent(options.marketitem));
			let _this=this;
			uni.getStorage({
				key:"user",
				success:(res)=>{
					_this.showObj['srcs']=res.data.userInfo.avatarUrl;
					_this.showObj['name']=res.data.userInfo.nickName;
					_this.showObj['openId']=res.data.openId;
				}
			})
			console.log(this.showObj);
			this.list5.push(this.showObj.coverImg);
		},
		mounted() {
			this.get();
		},
		methods: {
			phone() {
				uni.navigateTo({
					url: '../mesChat/mesChat'
				})
			},
			get() {
				uni.getStorage({
					key: "user",
					success: (res) => {
						let _this = this;
						_this.userInfo = res.data.userInfo;
					}
				})
			},
			gomct(item){
				uni.navigateTo({
					url:'../merchant/merchant?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			change(e) {
				console.log('change', e);
			},
			toOrder() {
				uni.navigateTo({
					url: '../placeOrder/placeOrder?content='+encodeURIComponent(JSON.stringify(this.showObj))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		font-family: "Hiragino Sans GB", "PingFang SC";
	
	.buyframe {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200upx;
			background-color: #FFFFFF;
			// border-radius: 1px;
			border-left: none;
			border-right: none;
			border-bottom: none;
			// border-style: solid;
			border-top: #eeeeef 1upx solid;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-top-right-radius: 15upx;
			border-top-left-radius: 15upx;
			display: flex;
			justify-content: space-around;

			.buttonbuy {
				margin-top: 4%;
				width: 40%;
			}

			.buttoncontact {
				margin-top: 4%;
				width: 40%;
			}
		}

		.head {
			background-color: #eeeeef;
			width: 90%;
			margin-left: 5%;
			margin-top: 5%;
			margin-bottom: 5%;
			height: 200upx;
			overflow: hidden;
			display: flex;
			border-radius: 10upx;
			border: 1upx solid lightgray;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.mct {
				margin-top: 5%;
				width: 70%;
				height: 130upx;
				// background-color: #2979FF;
				margin-left: 2%;
				display: flex;
				flex-wrap: wrap;

				.name {
					margin-top: 5%;
					width: 100%;
				}
			}

			.mcava {
				height: 130upx;
				width: 130upx;
				// background-color: #000000;
				border: 1upx solid #ffffff;
				border-radius: 50%;
				margin-top: 5%;
				margin-left: 5%;

				.ava {
					height: 130upx;
					width: 130upx;
					border-radius: 50%;
				}
			}
		}

		.center {
			// background-color: #ddd4cf;
			width: 90%;
			margin-left: 5%;
			border: 1upx solid lightgray;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

			.commodity {
				width: 100%;
				background-color: #eeeeef;
				// height: 1500upx;
				border-radius: 10upx;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

				overflow: hidden;

				.commodityposter {
					width: 90%;
					margin-top: 5%;
					margin-left: 5%;
					// height: 600upx;
					height: 600upx;
					background-color: #ffffff;
					// border-radius: 15upx;

				}

				.commodityintro {
					width: 90%;
					margin-left: 5%;
					// height: 250upx;
					// background-color: #8a86c3;
					padding-top: 2%;

					.title {
						height: 15%;
						width: 100%;
						display: flex;
					}

					.pricearea {
						height: 100%;
						width: 50%;
						// background-color: #fffedf;
						// margin-left: 30%;
						margin-left: 10%;
						display: flex;

						.price {
							margin-left: 10%;
							font-size: 40upx;
							margin-top: -2%;
							font-weight: 800;
							color: red;
						}
					}

					.title_spjs {
						height: 100%;
						width: 40%;
						// background-color: #fffedf;
					}

					.introducearea {
						width: 93.2%;
						border: 1upx solid lightgray;
						box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
						// height: 70%;
						background-color: #ffffff;
						margin-top: 2%;
						table-layout: fixed;
						word-wrap: break-all;
						word-break: normal;
						padding: 20upx;
						font-size: 25upx;
						margin-bottom: 20upx;
					}
				}
			}
		}

		.foot {
			margin-top: 40upx;
			width: 90%;
			margin-left: 5%;
			// height: 1500upx;
			background-color: #eeeeef;
			border-radius: 10upx;
			border: 1upx solid lightgray;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			display: flex;
			// flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: 240upx;

			.bottomhalf {
				width: 80%;
				margin-left: 10%;
				height: 600upx;
				background-color: #ffffff;
				margin-top: 40upx;
				margin-bottom: 40upx;
			}

			.tophalf {
				width: 80%;
				margin-left: 10%;
				margin-top: 40upx;
				background-color: #ffffff;
				margin-bottom: 40upx;
				padding-left: 10upx;
				border-radius: 10upx;
				height: 220upx;
				border: 1upx solid lightgray;

				.tj {
					height: 52upx;
					width: 30%;
					margin-left: 33%;
					margin-top: 20upx;

				}

				.leavingmes {
					text-align: center;
				}

				.userava {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}

				.input {
					background-color: #efefef;
					width: 70%;
					margin-left: 20%;
					margin-top: -13%;
					border-radius: 10upx;
				}
			}
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
